<template>
	<eui-page-frame topHeight="170"  bottomHeight="96">
		<template #top>
			<view class="content-img">
				<eui-nav-bar title="谈条款" color="#000000" />
			</view>
		</template>
		<eui-page-content>
			<eui-base-card v-if="feeData.length>0">
			<view v-for="(item,index) in feeData" :key="index">
				<view class="fee-data" :style="[index===feeData.length-1?'border-bottom:none':'']">
					<view class="m-card-input-view">
						<view class="m-card-input-title">
							<text class="m-title-text">{{ item.c_article_name }}</text>
						</view>
						<view style="display: flex;flex: 1;">
							<input :id="index" v-model="item.c_amount" type="digit" placeholder-style="color:#CCCCCC" ref='input'
								class="m-input-input" :style="{textAlign: 'right'}" @blur="onBlur">
						</view>
					</view>
					<view class="unit-value">{{item.c_unit_name}}</view>
					<view class="bz-value">{{item.c_value}}，{{item.c_min}}-{{item.c_max}}</view>
				</view>
				<view v-if="index!==feeData.length-1" class="line-view"></view>
			</view>
			</eui-base-card>
			<view v-else>
				<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
				<view class="no-data-text">暂无数据</view>
			</view>
		</eui-page-content>
		<template #bottom  v-if="feeData.length>0">
			<view class="bt-button">
				<eui-button :disabled="!showButtom" type="primary" title="提交" @click="submit" />
			</view>
		</template>
	</eui-page-frame>
</template>


<script setup lang="ts">
	import { ref,computed } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { useMainStore } from '../../../store/modules/store';
	import useSaveBill from '@/hooks/useSaveBill';
	import { getRelatedName, getDictName, getDictSelectList } from '../components/RelatedName.js';
	import useService from '@/hooks/useService';
	const service = useService({ prefix: "apiApi" });
	const unitList = ref(getDictSelectList('招商标准定义标准值单位'));
	const dataModel = ref({});
	const billId = ref('');
	const showButtom =  computed(() => {
		return dataModel.value.c_status==='0' && (dataModel.value.c_approve_status==='1' || !dataModel.value.c_approve_status);
	});
	const { save, createId } = useSaveBill({
		prefix: 'apiApi',
		table: {
			main: [
				{
					tableName: "tb_mo_talk",
					primaryKeys: ["c_id", "c_tenant_id"],
				},
			],
			detail: [
				{ tableName: 'tb_mo_talk_article', primaryKeys: ['c_tenant_id', 'c_id', 'c_article_code'] },
				{ tableName: 'tb_mo_talk_process', primaryKeys: ['c_tenant_id', 'c_id', 'c_process_id'] },
				{ tableName: 'tb_mo_talk_cetificate', primaryKeys: ['c_tenant_id', 'c_id', 'c_name'] },
			]
		},
		uniqueKey: "管易通洽谈记录登记单",
		method: "EnjoyBillSave",
		billName: '洽谈记录登记单',
		billType: 'D11'
	});
	const feeData = ref([]);
	const isAdd = ref(true);
	onLoad(async ({ c_id }) => {
		billId.value = c_id;
		await GetBillItem();
	})
	//获取费用条款
	const GetArticleFee = async () => {
		const req = {
			IsNotPage: true,
			WhereList: [{
				c_col: "c_is_intention",
				c_oper: "等于",
				c_value: '1',
				c_logic: "而且"
			},
			{
				c_col: "c_id_level",
				c_oper: "左相似",
				c_value: dataModel.value?.c_store_id,   //机构
				c_logic: "而且",
			},
			{
				c_col: "c_store_id",
				c_oper: "等于",
				c_value: dataModel.value?.c_store_id,   //机构
				c_logic: "而且",
			},
			{
				c_col: "c_counter_no",
				c_oper: "等于",
				c_value: dataModel.value?.c_counter_no,   //铺位
				c_logic: "而且",
			},
			{
				c_col: "c_bcode",
				c_oper: "等于",
				c_value: dataModel.value?.c_bcode,   //品牌
				c_logic: "而且",
			},
			{
				c_col: "c_ccode",
				c_oper: "等于",
				c_value: dataModel.value?.c_ccode,   //品类
				c_logic: "而且",
			},
			]
		};
		const res = await service.request('管易通洽谈记录登记单', 'GetArticleFee', req);
		if (res) {
			feeData.value = res.map(x => {
				return {
					...x,
					c_id: dataModel.value?.c_id,
					c_unit_name: unitList.value.find(y => y.value === x.c_unit)?.text
				}
			});
		}
	}
	//获取单据详情
	const GetBillItem = async () => {
		const req = {
			BillId: billId.value
		};
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通洽谈记录登记单', 'EnjoyBillQuery', req);
		uni.hideLoading();
		if (res) {
			dataModel.value = res.ds[0];
			feeData.value = res.ds1.map(x => {
				return {
					...x,
					c_unit_name: unitList.value.find(y => y.value === x.c_unit)?.text
				}
			})
			if (feeData.value.length === 0) {
				await GetArticleFee();
			}
			else {
				isAdd.value = false;
			}
		}
	}
	const onBlur = (e)=>{
		let value = e.detail.value.replace(/^0+/, '');
		let index = parseInt(e.target.id);
		if(value===""){
			uni.showToast({
				duration: 3500,
				icon: 'none',
				title: feeData.value[index].c_article_name + '不能为空！'
			});
			return;
		}
		feeData.value[index].c_amount = parseFloat(value);
		const reg = /^(?:[1-9]\d*|0)?(?:\.\d{1,2})?$/
		if (!reg.test(value)) {
			uni.showToast({
				duration: 3500,
				icon: 'none',
				title: feeData.value[index].c_article_name + '请输入大于等于0的数！'
			});
		}
		if(parseFloat(value) > 999999){
			uni.showToast({
				duration: 3500,
				icon: 'none',
				title: feeData.value[index].c_article_name + '最大不能超过999999！'
			});
		}
	}
	const submit = async () => {
		let err = false;
		for (let i = 0; i < feeData.value.length; i++) {
			const feeItem = feeData.value[i];
			if(feeItem.c_amount===""){
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: feeItem.c_article_name + '不能为空！'
				});
				err = true;
				return;
			}
			const reg = /^(?:[1-9]\d*|0)?(?:\.\d{1,2})?$/
			if (!reg.test(feeItem.c_amount)) {
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: feeItem.c_article_name + '请输入大于等于0的数！'
				});
				err = true;
				return;
			}
			if(feeItem.c_amount>999999){
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: feeItem.c_article_name + '最大不能超过999999！'
				});
				err = true;
				return;
			}
		}
		if (!err) {
			uni.showLoading({ title: "正在保存...", mask: true });
			let details = [{
				NewList: isAdd.value ? feeData.value : [],
				ModifiedList: isAdd.value ? [] : feeData.value,
				DelList: []
			}];
			const result = await save(false, dataModel.value, details);
			uni.hideLoading();
			uni.showToast({
				duration: 2000,
				icon: 'none',
				title: '保存成功'
			});
			setTimeout(async() => {
			  await GetBillItem(result.BillId);
			},1000);
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #F2F2F2;
		padding: 0px !important
	}

	.content-img {
		background-color: #FFFFFF;
		background-size: 100% 420rpx;
		background-repeat: no-repeat;
		width: 100%;
	}

	.navigation {
		flex: 0 0 auto;
		margin-bottom: 5px;
	}

	.m-card-input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		width: 50%;
		background: #FFFFFF;
		padding: 16rpx 0rpx 16rpx 18rpx;
		box-sizing: border-box;
	}

	// 左侧标题
	.m-card-input-title {
		width: 150rpx;
		min-height: 40rpx;
	}

	.m-title-text {
		font-size: 26rpx;
		font-family: 'PingFangSC-Regular', 'sans-serif', 'SourceHanSansCN-Regular', 'SourceHanSansCN', 'Times New Roman', 'Georgia', 'serif';
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	// 右侧内容
	.m-card-input-content {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		position: relative;
	}

	// 单行输入框
	.m-input-input {
		flex: 1;
		line-height: 40rpx;
		min-height: 60rpx;
		background-color: #F9F9F8;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28rpx;
		color: #000000;
		margin-left: 20rpx;
		border-radius: 10rpx;
	}

	.fee-data {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.unit-value {
		margin-left: 8rpx;
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bz-value {
		margin-left: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #02B7E6;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bt-button {
		background-color: #FFFFFF;
		padding: 10rpx 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.image-min {
		width: 100%;
		height: 200rpx;
		opacity: 0.6;
	}
	.no-data-text{
		text-align: center;
		color: #cccccc;
		font-size:24rpx;
		margin-top:-20rpx;
	}
	.line-view{
		width: 100%;
		height: 1px;
		border-bottom: 1rpx solid #EEEEEE;
		margin-left: 20rpx;
	}
	::v-deep .e-card{
		&__content{
			margin-bottom:0rpx !important;
		}
	}
</style>